<template>
    <div class="contactRecords-box">
        <!-- 客户联系记录 -->
        <serchForm :Form="clientForm" :FormLabel="clientFormLabel" @onSearch="onSearch" />
        <div class="function-box">
            <!-- <el-button class="reviseBtn" @click="reviseVisit"><i class="iconfont icon-xiugai"></i>
                修改
            </el-button>
            <el-button class="exportBtn" @click="deleteCustomer"><i class="iconfont icon-shanchu"></i>
                删除
            </el-button> -->
            <!-- <el-button class="baifang" @click="addVisit"><i class="iconfont icon-baifangguanli"></i>
                拜访
            </el-button> -->
        </div>
        <forTableCom :color="color" :idActive="idActive" :bg="bg" :total="totals" :page="pageNum" :limit="pageSize"
            @handleSelectionChange="handleSelectionChange" @handleChange="handleChange"
            @updatePage="updatePage" @updateLimit="updateLimit" :tableHeaderData="clientTableHeaderData"
            @handleEdit="handleEdit" @handleDelete="handleDelete" :tableData="clientTableData" :operate="operate" />

    </div>
</template>
<script setup>
import serchForm from '@/components/inventory/serchForm.vue';
import forTableCom from '@/components/forTableCom/index.vue';
import { updatePopHook } from '@/hook/setPop/updatePop.js'
import { getRecords } from '@/api/customer'
let updatePop = updatePopHook()
import { ref } from 'vue';
const idActive = 'customerId'
// 显示操作栏
const operate = ref(false)

// 表单绑定属性名
let clientForm = ref(
    {
        customerName: '',    // 客户名称
        contactPhone: '',    // 联系电话
        underwayPerson: '',      // 跟进人
    }
)
// 表单数据标题
let clientFormLabel = ref([
   
    {
        name: 'customerName',
        label: '客户名称',
    },
    {
        name: 'contactPhone',
        label: '联系电话',
    },
    {
        name: 'underwayPerson',
        label: '跟进人'
    },
])
// 查找
const onSearch = (v) => {
      // 每次查询后回到页1
      pageNum.value = 1
      getRecordsFn(v)
}
// 表格
let color = ref('#333')
let bg = ref('#d9d9d93b')

// 总条目数  
let totals = ref(50)
// 当前页数
let pageNum = ref(1)
// 条数
let pageSize = ref(50)
// 存储勾选框的对象
let multipleSelection = ref([])

// 表格表头数据
let clientTableHeaderData = ref([
  
    {
        prop: 'customerName',
        label: '客户名称',
        colorClassName: 'activeColor',
    },
    {
        prop: 'contactPhone',
        label: '联系电话',
    },
    {
        prop: 'address',
        label: '地址',
    },
    {
        prop: 'underwayTime',
        label: '跟进时间',
    },
    {
        prop: 'clientUnderwayStage',
        label: '客户跟进阶段',
    },
    {
        prop: 'visitWay',
        label: '拜访方式',
    },
    {
        prop: 'underwayPerson',
        label: '跟进人'
    },
    {
        prop: 'underwayOutcome',
        label: '跟进结果'
    },
    {
        prop: 'remarks',
        label: '备注',
    },
])
// 表格数据内容
let clientTableData = ref([
   
])

// 删除客户
const deleteCustomer = () => {
    console.log('删除客户');
}
// 修改拜访记录
const reviseVisit = () => {
    updatePop(multipleSelection, visitFlag, '修改拜访记录', false)
}

// 选中的列
const handleSelectionChange = (v) => {
    multipleSelection.value = v
    console.log(v);
}

// 分页器大小  当前分页器
const handleChange = (v) => {
    let { page, limit } = v.page
    pageNum.value = page
    pageSize.value = limit
    getRecordsFn()
}
// 当前页面位置发生变化
const updatePage = (v) => {
    console.log(v);
}
// 条目个数发生变化
const updateLimit = (v) => {
    console.log(v);
}
// 编辑
const handleEdit = (props) => {
    let { i, v } = props
    console.log('编辑', i, v);
}
// 删除
const handleDelete = (props) => {
    let { i, v } = props
    console.log('删除', i, v);
}



const getRecordsFn  = async (data)=>{
    let data1 = {
        pageNum: pageNum.value,
        pageSize: pageSize.value,
    }
    console.log(data,'lllllllllllllll');
    let params = Object.assign(data1, data)
    let res = await getRecords(params)
    let { code, total, rows } = res
    if (code == 200) {
        clientTableData.value = rows
        totals.value = total
    }
}
onMounted(() => {
    getRecordsFn()
})
</script>
<style scoped lang='scss'>
.contactRecords-box {
    padding: 16px;

    .function-box {
        display: flex;
        align-items: center;
    }
}
</style>
